<script setup lang="ts">
import {reactive, ref} from "vue";
import type {BasicEntity} from "@utils/entity";
import {ElMessage} from "element-plus";

let form = reactive<BasicEntity>({
    address: "以宇谷科技园为中心",
    monthAmount: 12,
    elAmount: 12,
    radius: 1
})
let nearbyResult = ref([
    {
        count: '5台',
        name: '周边电柜',
    },
    {
        count: '333个',
        name: '周边骑手数',
    },
    {
        count: '343次',
        name: '日均换电次',
    },
    {
        count: '2555.00',
        name: '上月总电费',
    },
    {
        count: '3000元',
        name: '上月综场地费',
    },
    {
        count: '52200.00',
        name: '上月总分成',
    },
    {
        count: '1.2元/度',
        name: '电费均价',
        level: 3
    },
    {
        count: '300元/月',
        name: '场地费均价',
        level: 2
    },
    {
        count: '8%',
        name: '分成',
        level: 1
    },
])

function onSubmit() {
    ElMessage.info({message: "提交成功"})
}
</script>

<template>
    <div class="main-page">
        <el-form v-model="form" style="margin-top: 24px" label-width="88px" >
            <el-form-item label="评估位置:">
                <el-input v-model="form.address" placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item label="店铺月租金:">
                <el-input-number class="default-input-num" v-model="form.monthAmount" :min="0" :controls="false" placeholder="请输入"></el-input-number>
            </el-form-item>
            <el-form-item label="电价(元/度):">
                <el-input-number class="default-input-num" v-model="form.elAmount" :min="0" :controls="false" placeholder="请输入"></el-input-number>
            </el-form-item>
            <el-form-item label="辐射半径:">
                <el-radio-group v-model="form.radius">
                    <el-radio-button label="0.5km" :value="0.5"></el-radio-button>
                    <el-radio-button label="1km" :value="1"></el-radio-button>
                    <el-radio-button label="2km" :value="2"></el-radio-button>
                    <el-radio-button label="3km" :value="3"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-button round type="primary" style="width: 100%;height: 44px" @click="onSubmit">一键分析</el-button>
        </el-form>
        <div style="text-align: center;margin-top: 12px">
            选址综合分析
        </div>
        <div style="background:#f9f9f9;margin-top: 24px;padding-bottom: 12px;border-radius: 12px; ">
            <div style="display: flex;justify-content: space-between;background: #ffefe6;padding: 12px;border-radius: 12px  12px 0 0 ; ">
                <span style="color: #ff8041">综合评分：5分</span>
                <span style="color: #ff8041">推荐</span>
            </div>
            <div style="text-align: center;margin-top: 12px">
                评分对应评论表
            </div>
            <div style="color: #ff8041;padding-left: 16px">4.1-5分</div>
            <div style="margin:2px 12px 0">
                <span style="display: inline-block; width: 66px;text-align: center;background: #ff8041;color: white;border-radius: 12px 0 ">推荐</span>
                <span style="margin-left: 12px">位置非常好，力争那些（关注租金是否过高）</span>
            </div>
            <div style="color: #6c8cff;padding-left: 16px;margin-top:6px">3.5-4分</div>
            <div style="margin:2px 12px 0">
                <span style="display: inline-block; width: 66px;text-align: center;background: #6c8cff;color: white;border-radius: 12px 0 ">一般</span>
                <span style="margin-left: 12px">位置一般，谨慎考虑（除非租赁条件优渥）</span>
            </div>
            <div style="color: #727272;padding-left: 16px;margin-top:6px">2.1-3.4分</div>
            <div style="margin:2px 12px 0">
                <span style="display: inline-block; width: 66px;text-align: center;background: #727272;color: white;border-radius: 12px 0 ">谨慎选址</span>
                <span style="margin-left: 12px">店址条件低于标准，要非常小心，不要冒风险</span>
            </div>
            <div style="color: #828282;padding-left: 16px;margin-top:6px">0-2分</div>
            <div style="margin:2px 12px 0">
                <span style="display: inline-block; width: 66px;text-align: center;background: #828282;color: white;border-radius: 12px 0 ">不推荐</span>
                <span style="margin-left: 12px">很差店址，可放弃本店址</span>
            </div>
        </div>

        <div style="text-align: center;margin-top: 24px">周边基础信息</div>
        <div style="flex-wrap: wrap;display: flex;justify-content: space-around">
            <div v-for="(item,index) in nearbyResult" style="width: 30%;margin-top: 12px;display: flex;justify-content: center">
                <div style="background: #f6f6f6; width:100%;text-align: center;padding: 6px 0;border-radius: 12px">
                    <div>
                        {{ item.count }}
                    </div>
                    <div style="margin-top: 6px">
                        {{ item.name }}
                    </div>
                    <div v-if="item.level" style="margin-top: 6px">
                        <div v-if="item.level==3" style="background: #ffe4d6;color: #f68600;padding: 2px;">高于周边
                            <Pointer style="width: 12px;height: 12px"></Pointer>
                        </div>
                        <div v-if="item.level==2" style="background: #dbe3ff;color: #3a65ff;padding: 2px">周边持平</div>
                        <div v-if="item.level==1" style="background: #dbf5e2;color: #02c054;padding: 2px">低于周边</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.main-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    font-size: 13px;
}

.default-input-num {
    :deep(.el-input__inner) {
        text-align: left;
    }
}
</style>